<template>
  <div class="report-board">
    <el-dialog :visible="show_report" width="910px" @close="close" title="疑似违章建筑监察结果报告" top="10vh" @opened="opened" ref="dialog" :close-on-click-modal="true">
      <div class="content">
        <form class="">
          <div class="report">
            <!-- <h1>疑似违章建筑监察结果报告</h1> -->
            <div class="report-top">
              <div class="report-item">
                <div class="warp r-border">
                  <div class="item-title b-border">案件号</div>
                  <div class="item-content  b-border">{{temp.caseId}}</div>
                </div>
                <div class="warp">
                  <div class="item-title b-border">发现时间</div>
                  <div class="item-content  b-border">
                    <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="选择时间" />
                  </div>
                </div>
              </div>
              <div class="report-item">
                <div class="warp r-border">
                  <div class="item-title b-border">来源</div>
                  <div class="item-content  b-border">
                    <el-select v-model="temp.source" placeholder="选择来源" clearable class="filter-item">
                      <el-option v-for="item in sourceOptions" :key="item" :label="item" :value="item" />
                    </el-select>
                  </div>
                </div>
                <div class="warp">
                  <div class="item-title b-border">社区</div>
                  <div class="item-content  b-border">
                    <el-select v-model="temp.community" placeholder="选择社区" clearable class="filter-item">
                      <el-option v-for="item in communityOptions" :key="item" :label="item" :value="item" />
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="report-item">
                <div class="warp r-border">
                  <div class="item-title b-border">坐标</div>
                  <div class="item-content  b-border">{{temp.lnglat[0]}},{{temp.lnglat[1]}}</div>
                </div>
                <div class="warp">
                  <div class="item-title b-border">状态</div>
                  <div class="item-content  b-border">
                    <el-select v-model="temp.status" placeholder="选择状态" clearable class="filter-item">
                      <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
            <div class="report-center">
              <h3>地图位置</h3>
              <div class="address-wrap" v-if="temp.address">
                <div class="address">{{temp.address}}</div>
                <!-- <div>
                    <el-button type="primary" size="mini" @click="mapEdit">
                      编辑
                    </el-button>
                  </div> -->
              </div>
              <div class="map" id="map">
                <div class="input-lnglat">
                  <div class="lnglat">
                    <el-input v-model="temp.lnglat[0]" clearable size="mini" style="margin-bottom:5px;">
                      <template slot="prepend">经度</template>
                    </el-input>
                    <el-input v-model="temp.lnglat[1]" clearable size="mini">
                      <template slot="prepend">纬度</template>
                    </el-input>
                  </div>
                  <div class="lnglat-button">
                    <el-button type="primary" round size="mini" @click="changePostion">确定位置</el-button>
                  </div>
                  <!-- <el-input placeholder="请输入内容" v-model="temp.lnglat[0]" clearable>
                    </el-input>
                    <el-input placeholder="请输入内容" v-model="temp.lnglat[1]" clearable>
                    </el-input> -->
                </div>
              </div>
            </div>
            <div class="report-center">
              <h3>往期追溯</h3>
              <div class="images">
                <preview></preview>
                <!-- <vue-preview :slides="slide" @close="handleClose"></vue-preview> -->
              </div>
            </div>
            <div class="report-bottom">
              <h3>备注：</h3>
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="temp.remark">
              </el-input>
              <!-- <p>{{ info.remarks }}</p>
                  <label>提交：</label>
                  <label>日期：</label>
                  <label>审核：</label> -->
            </div>
          </div>
          <!-- <h2>申请无人机支援需填写</h2>
            <div class="form-item">
              <div class="item-label">
                <label for="image_type">拍摄类型</label>
              </div>
              <div class="item-input">
                <el-select class="" v-model="protype" multiple placeholder="请选择拍摄类型">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </div>
            <div class="form-item">
              <div class="item-label">
                <label for="image_type">其他拍摄类型</label>
              </div>
              <div class="item-input">
                <el-input class="input" v-model="inputype" placeholder="其他拍摄类型"></el-input>
              </div>
            </div> -->
          <div class="form-footer">
            <div>
              <h3>后台操作记录：</h3>
            </div>
            <div>
              <el-table :data="res" height="200" border style="width: 100%">
                <el-table-column prop="date" label="日期" width="200" align="center">
                </el-table-column>
                <el-table-column prop="operate" label="操作">
                </el-table-column>
                <el-table-column prop="staff" label="人员" width="200" align="center">
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template v-slot="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <!-- <el-button type="text" size="small">编辑</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </form>
        <div class="form-button">
          <el-button>取消</el-button>
          <el-button type="primary">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import AMap from 'AMap'
  import Velocity from 'velocity-animate'
  import preview from './preview'
  export default {
    data() {
      return {
        // protype: '',
        // inputype: '',
        // options: [{
        //   value: '选项1',
        //   label: '全景'
        // }, {
        //   value: '选项2',
        //   label: '特写'
        // }, {
        //   value: '选项3',
        //   label: '视频'
        // }],
        // info: {
        //   caseNumber: 'LG-xlc-20180313001',
        //   source: '无人机全景系统',
        //   coordinate: '114.211198,22.782604',
        //   discoveryDate: '2018-03-13',
        //   community: '五联社区',
        //   remarks: '疑似拆除房屋',
        //   address: '龙岗街道五联社区下撩旁'
        // },
        temp: { // 临时数据对象
          lnglat: []
        },
        sourceOptions: ['全景', '无人机'], // 下拉选项
        statusOptions: ['待核实', '伪变化'], // 下拉选项
        communityOptions: ['社区1', '社区2', '社区3'], // 下拉选项
        res: [ // 操作记录
          {
            date: '2019-05-07 13:04:05',
            operate: '报告',
            staff: '人员'
          },
          {
            date: '2019-05-07 13:04:05',
            operate: '报告',
            staff: '人员'
          }, {
            date: '2019-05-07 13:04:05',
            operate: '报告',
            staff: '人员'
          },
          {
            date: '2019-05-07 13:04:05',
            operate: '报告',
            staff: '人员'
          }
        ],
        slide: [ // 图片列表
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
      }
    },
    props: {
      id: {
        type: String,
        default: ''
      },
      show_report: {
        type: Boolean,
        default: () => false
      }
    },
    mounted() {
      // console.log(JSON.parse(data))
      //   setTimeout(() => {
      //     this.initMap()
      //   }, 20)
    },
    methods: {
      handleClose() {

      },
      changePostion() {
        const lnglat = new AMap.LngLat(this.temp.lnglat[0], this.temp.lnglat[1])
        this.marker.setPosition(lnglat)
        this.gaodemap.setFitView()
        // console.log(lnglat)
      },
      opened() {
        Velocity(this.$refs.dialog.$el, { scrollTop: 0 })
        if (!this.gaodemap) {
          this.initMap()
        }
        this.getData()
        // this.initMark()
      },
      getData() {
        if (this.id === '1') {
          this.temp = {
            id: '1',
            source: '无人机全景系统',
            timestamp: '2019-05-08 03:04:05',
            title: 'aaaaaa',
            author: '人员1',
            reviewer: '审核1',
            community: '五联社区',
            importance: 1,
            status: '待核实',
            caseId: '123231313',
            address: '龙岗街道五联社区下撩旁',
            lnglat: ['114.211198', '22.782604'],
            remark: '11'
          }
        } else {
          this.temp = {
            id: '2',
            timestamp: '2019-05-07 13:04:05',
            source: '无人机',
            title: 'aaaaaa',
            author: '人员2',
            reviewer: '审核2',
            community: '五联社区',
            importance: 3,
            status: '待核实',
            caseId: '123231313',
            address: '龙岗街道五联社区下撩旁',
            lnglat: ['114.211198', '22.582604'],
            remark: '111'
          }
        }
        if (this.id === '') {
          this.temp = {
            id: `${(Math.random() * 10)}`,
            timestamp: '',
            source: '',
            title: '',
            author: '',
            reviewer: '',
            community: '',
            importance: 0,
            status: '',
            caseId: `${(Math.random() * 10)}`,
            address: '',
            lnglat: ['114.989136', '22.831075'], // 默认
            remark: ''
          }
        }
        if (this.marker) {
          this.marker.setPosition(new AMap.LngLat(this.temp.lnglat[0], this.temp.lnglat[1]))
          this.gaodemap.setFitView()
          return
        }
        this.initMark(this.temp.lnglat)
      },
      initMap() {
        this.gaodemap = new AMap.Map('map',
        {
          viewMode: '2D',
          resizeEnable: true,
          zoom: 16,
          center: [114.989136, 22.831075]
          //   mapStyle: 'amap://styles/dark'
        })
      },
      initMark(LngLat) {
        if (!LngLat) return
        if (!(LngLat[0] && LngLat[1])) return
        const Icon = new AMap.Icon({
          size: new AMap.Size(36, 36),
          image: './site/pin.png',
          imageSize: new AMap.Size(36, 36)
        })
        // console.log(new AMap.LngLat(114.211198, 22.782604))
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(LngLat[0], LngLat[1]),
          icon: Icon,
          draggable: true
          //   extData: {
          //     id: item.id,
          //     type: item.type,
          //     class: item.class
          //   }
        })
        this.marker.on('dragend', () => {
          const lnglat = this.marker.getPosition()
          this.temp.lnglat = [`${lnglat.lng}`, `${lnglat.lat}`]
        })
        // // marker.setDraggable(false)
        this.gaodemap.add(this.marker)
        this.gaodemap.setFitView()
      },
      //   mapEdit() {
      //     if (!this.marker) return
      //   },
      handleClick(row) {
        console.log(row)
      },
      close() {
        this.$emit('update:show_report', false)
        this.$emit('close')
      },
      submitUpload() {
        // this.$refs.upload.submit()
        // console.log(this.file)
      }
    },
    components: {
      preview
    }
  }
</script>

<style lang="less" scope>
  .report-board {

    .amap-logo,
    .amap-copyright {
      z-index: -10;
      opacity: 0;
    }

    .el-dialog__header {
      text-align: center;
    }

    .el-dialog__body {
      padding: 10px 20px;
    }

    .content {
      padding: 16px;
      font-size: 12px;
      line-height: 1.5;

      .form-button {
        padding-top: 20px;
        text-align: right;
      }

      .report {
        .report-top {
          border-top: 1px solid #DCDFE6;
          border-left: 1px solid #DCDFE6;
          border-right: 1px solid #DCDFE6;

          .report-item {
            display: flex;

            .el-input__inner {
              border: none;
              text-align: center;
            }

            .warp {
              flex: 1;
              text-align: center;
              box-sizing: border-box;
              font-size: 14px;

              .item-title {
                height: 36px;
                line-height: 36px;
                font-weight: bold;
                color: #909399;
              }

              .item-content {
                height: 50px;
                line-height: 50px;
                color: #606266;
              }

            }

          }
        }

        .report-center {
          width: 100%;

          h3 {
            margin: 15px 0 5px;
          }

          .address-wrap {
            display: flex;
            height: 36px;

            .address {
              flex: 1;
              //   height: 36px;
              line-height: 36px;
            }
          }

          .images {
            overflow: auto;
          }

          .map,
          .images {
            height: 370px;
            width: 100%;
            border: 1px solid #DCDFE6;
            border-radius: 4px;

            .input-lnglat {
              position: absolute;
              z-index: 99;
              bottom: 10px;
              left: 10px;
              //   width: 100px;
              //   height: 50px;
              padding: 8px;
              background: #ffffff;
              border-radius: 4px;
              box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);

              .lnglat {
                width: 200px;
                margin-bottom: 10px;
              }

              .lnglat-button {
                text-align: center;
              }
            }
          }
        }
      }

      //   .report {
      //     width: 852px;
      //     margin: 0 auto 20px;
      //     border: 1px solid #DCDFE6;

      //     h1 {
      //       width: 100%;
      //       height: 50px;
      //       line-height: 50px;
      //       text-align: center;
      //       font-size: 16px;
      //     }

      //     .report-top {
      //       width: 100%;
      //       height: auto;
      //       border-top: 1px solid #DCDFE6;
      //       overflow: hidden;

      //       dl {
      //         width: 50%;
      //         float: left;
      //         border-right: 1px solid #DCDFE6;
      //         box-sizing: border-box;

      //         dt {
      //           width: 100%;
      //           height: 30px;
      //           line-height: 30px;
      //           text-align: center;
      //           border-bottom: 1px solid #DCDFE6;
      //           font-weight: bold;
      //           font-size: 14px;
      //         }

      //         dd {
      //           width: 100%;
      //           height: 45px;
      //           line-height: 45px;
      //           text-align: center;
      //           border-bottom: 1px solid #DCDFE6;
      //         }
      //       }

      //       dl:nth-child(2) {
      //         border: none;
      //       }

      //       h3 {
      //         text-align: center;
      //         line-height: 30px;
      //         border-bottom: 1px solid #DCDFE6;
      //       }

      //       p {
      //         line-height: 36px;
      //         text-align: center;
      //         border-bottom: 1px solid #DCDFE6;
      //       }
      //     }

      //     .report-center {
      //       width: 100%;

      //       h3 {
      //         height: 30px;
      //         text-align: center;
      //         line-height: 30px;
      //         border-bottom: 1px solid #DCDFE6;
      //       }

      //       .map {
      //         height: 370px;
      //         width: 850px;
      //         border-bottom: 1px solid #DCDFE6;
      //       }
      //     }

      //     .report-bottom {
      //       width: 100%;
      //       overflow: hidden;

      //       h3 {
      //         height: 30px;
      //         line-height: 30px;
      //         border-bottom: 1px solid #DCDFE6;
      //         text-indent: 10px;
      //       }

      //       p {
      //         height: 75px;
      //         line-height: 25px;
      //         border-bottom: 1px solid #DCDFE6;
      //       }

      //       label {
      //         width: 33.3%;
      //         float: left;
      //         height: 30px;
      //         line-height: 30px;
      //         font-weight: bold;
      //         font-size: 14px;
      //         text-indent: 10px;
      //         border-right: 1px solid #DCDFE6;
      //       }

      //       label:last-child {
      //         border: none;
      //       }
      //     }
      //   }

      //   h2 {
      //     height: 27px;
      //     line-height: 27px;
      //     font-size: 1.5em;
      //   }

      //   .form-item {
      //     margin-bottom: 24px;

      //     .item-label {
      //       margin-top: 10px;
      //       display: block;
      //       text-align: left;
      //       line-height: 1.5px;
      //       float: left;
      //       width: 25%;
      //     }

      //     .item-input {
      //       width: 75%;

      //       .el-input__inner {
      //         // width: 75%;
      //         height: 30px;
      //         font-family: auto;
      //       }

      //       .el-select {
      //         display: flex;
      //       }

      //       .input {
      //         display: flex;
      //         width: 439px;
      //       }
      //     }
      //   }

      //   .form-footer {
      //     table {
      //       width: 100%;
      //       font-size: 14px;
      //       line-height: 34px;
      //       text-align: center;

      //       th {
      //         font-weight: bold;
      //       }

      //       td {
      //         border-bottom: 1px solid rgb(204, 204, 204);
      //         border-right: 1px solid rgb(204, 204, 204);
      //       }

      //       td:first-child {
      //         font-weight: bold;
      //       }

      //       td:last-child {
      //         border-right: none;
      //         text-align: left;
      //         padding-left: 20px;
      //       }
      //     }
      //   }
    }
  }
</style>